import { Row, Col, Icon, Button } from 'antd';
import React from 'react';
import style from '../style.less';
import { AxPanelFunProps } from './data';

export const AxPanelFun: React.FC<AxPanelFunProps> = props => {
    const { data = [] } = props;

    return (
        <>
            <Row>
                {data && data.map((m: any) => {
                    return (
                        <Col span={8} style={{ paddingRight: '3px' }}>
                            <div className={style.card}>
                                <p className={style.card_title}>
                                    <Icon type={m.icon} />&nbsp;{m.title}
                                    {m.headActions && m.headActions.length && m.headActions.map((n: any) => {
                                        return (
                                            <Button className={style.right_btn} type="link" icon={n.icon} onClick={n.click}>{n.text}</Button>
                                        )
                                    })}
                                    {m.headActions1 && m.headActions1.length && m.headActions1.map((l: any) => {
                                        return (
                                            <Button className={style.right_btn} type="link" icon={l.icon} onClick={l.click}>{l.text}</Button>
                                        )
                                    })}
                                </p>
                                <p className={style.card_title}>
                                    <Row>
                                        <Col span={20}>
                                            <h5>{m.desc}</h5>
                                        </Col>
                                        <Col span={4}>
                                            <h5>{m.msg}</h5>
                                            <p style={{ color: '#f88c24', textAlign: 'center' }}>{m.total}</p>
                                        </Col>
                                    </Row>
                                </p>
                                <div className={style.fix_btn}>
                                    <Row>
                                        <Col>
                                            {m.footActions && m.footActions.length && m.footActions.map((p: any) => {
                                                return (
                                                    <Button type="link" icon={p.icon} block size="large" >{p.text}</Button>
                                                )
                                            })
                                            }
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </Col>
                    )
                })}

            </Row>
        </>
    )
}